<template>
  <div
    class="map-tool-container"
  >
    <div class="tools">
      <div class="tool">
        <div
          class="tool-item d-flex ai-c jc-c one-photo-button"
          @click="setZoom('fangda')"
          title="放大"
        >
          <i class="el-icon-plus" />
        </div>
        <div
          class="tool-item d-flex ai-c jc-c one-photo-button"
          @click="setZoom('suoxiao')"
          title="缩小"
        >
          <i class="el-icon-minus" />
        </div>
        <div
          class="tool-item d-flex ai-c jc-c one-photo-button"
          @click="setZoom('quanmao')"
          title="全貌"
        >
          <img
            src="~@/components/geo-map/images/quanmao.png"
            alt=""
          >
        </div>
      </div>
    </div>
    <div class="tools">
      <div class="tool">
        <div
          class="tool-item d-flex ai-c jc-c one-photo-button"
          @click="locate"
          title="定位"
        >
          <img
            src="~@/components/geo-map/images/dingwei.png"
            alt=""
          >
        </div>
        <div
          class="tool-item d-flex ai-c jc-c one-photo-button"
          @click="searchMap"
          title="搜索"
        >
          <img
            src="~@/components/geo-map/images/sousuo.png"
            alt=""
          >
        </div>
      </div>
    </div>
    <LocatePanel
      v-show="locatePanelVisible"
      ref="locatePanel"
      :is-global="false"
      @close="locatePanelVisible=false"
      @confirmLocate="confirmLocate"
      style="left: -10px;transform: translateX(-100%);top: 10px;"
    />
    <SearchPanel
      v-show="searchPanelVisible"
      ref="searchPanel"
      :is-global="false"
      @confirmLocate="confirmLocate"
      style="left: -10px;transform: translateX(-100%);top: 10px;"
    />
  </div>
</template>

<script>
import LocatePanel from '@/components/geo-map/locate-panel.vue'
import SearchPanel from '@/components/geo-map/search-panel.vue'
export default {
  name: 'MapTool',
  components: {
    LocatePanel,
    SearchPanel
  },
  data () {
    return {
      locatePanelVisible: false,
      searchPanelVisible: false
    }
  },
  methods: {
    setZoom (type) {
      this.$emit('setZoom', type)
    },
    locate () {
      this.locatePanelVisible = !this.locatePanelVisible
      this.searchPanelVisible = false
    },
    confirmLocate (location, info) {
      this.$emit('confirmLocate', location, info)
    },
    searchMap () {
      this.searchPanelVisible = !this.searchPanelVisible
      this.locatePanelVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.tools {
  display: flex;
  justify-content: flex-end;
  position: relative;
  margin-top: 10px;
  // top: 30px;
  width: 30px;
  // left: -30px;

  .tool {
    width: 32px;
    // background: rgba($color: #082281, $alpha: 0.7);
    border: 1px solid rgba(#fff, 0.5);
    border-radius: 4px;
    background: rgba(#1496ff, 0.9);

    .tool-item {
      height: 32px;
      color: #fff;
      cursor: pointer;

      &:hover {
        background: #028df7;
      }

      &:not(:last-child) {
        border-bottom: 1px solid rgba(#fff, 0.5);
      }
    }
  }
}
</style>
